<template>
	<view>
		<view class="tupian"></view>
		<view class="top">
		    <text class="top-text">预约成功</text>
		  </view>
		<view>
			<uni-card>
				<uni-row>
					<uni-col span="4">
						<view class="tp1"></view>
					</uni-col>
					<uni-col span="20">
						<view class="characters">扫码入园</view>
						<view class="charactersone">Scan the QR code to enter the park</view>
					</uni-col>
				</uni-row>
			</uni-card>
		</view>
		<view class="yuyue">
		    <text class="yuyue-text">预约信息</text>
		</view>
		<view>
		    <uni-card>
		      <view class="msg">姓名：张三</view>
		
		      <view class="msg">证件类型：港澳台居民身份证</view>
		
		      <view class="msg">证件号码：111</view>
		
		      <view class="msg">手机号码：222</view>
		
		      <view class="msg">同行人数：3人</view>
		
		    </uni-card>
		</view>
		<button class="tp2" @click="cancel"><text class="characterstwo">取消预约</text></button>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					name: '',
					idType: '身份证',
					idNumber: '123456789012345678',
					phoneNumber: '13800000000',
					teamName: '事例团队',
					teamPerson: 50,
					userInfoType: 'group'
				}
			};
		},
		onLoad() {
			// 从本地存储中读取数据
			uni.getStorage({
				key: 'userData',
				success: (res) => {
					this.userInfo = JSON.parse(res.data);
				}
			});
		},
		
		methods: {
			cancel() {
					// 实现取消预约的逻辑  
					uni.showModal({
						title: '提示',
						content: '确定要取消预约吗？',
						success: (res) => {
							if (res.confirm) {
								// 执行取消预约的API调用  
								console.log('预约已取消');
								// 清除本地存储中的数据
								uni.removeStorage({
									key: 'userData',
									success: (res) => {
										uni.reLaunch({
											url: "/pages/shouye/shouye"
										})
									}
								})
			
			
							}
						}
					});
				}
			},
		previewQRCode() {
			uni.previewImage({
				urls: ['/static/QR.png'], // 需要是网络上可访问的URL或者已经下载到本地的文件路径列表  
				current: 0, // 当前显示图片的http链接索引  
				success: function() {
					// 预览成功  
				}
			});
		}
	};
</script>
<style scoped>
	.msg{
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 16px;
		color: #000000;
		letter-spacing: 0;
		margin-top: 12px;
		margin-bottom: 12px;
	}
	.yuyue{
		text-align: left;
		margin-left: 18px;
		margin-top: 20px;
	}
	.yuyue-text{
		font-family: PingFangSC-Medium;
		font-weight: bold;
		font-size: 15px;
		color: #000000;
		letter-spacing: 1px;
	}
	.top{
		text-align: center;
		height: 85px;
		margin-bottom: -40px;
		margin-top: 15px;
	}
	.top-text{
		opacity: 0.9;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 20px;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
	}
	.tupian{
		width: 75px;
		height: 75px;
		/* background: #8DCB6D; */
		/* border-radius: 50%; */
		background-image: url("../../static/wzj1.png");
		margin: auto;
		margin-top: 20px;
	}
	.characters{
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #05261B;
		letter-spacing: 0;
	}
	.charactersone{
		width: 250px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #5F5F5F;
		letter-spacing: 0;
	}
	.tp1{
		width: 32px;
		height: 32px;
		background-image: url("../../static/wzj2.png");
		margin-top: 7%;
	}
	.characterstwo{
		width: 68px;
		height: 24px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 17px;
		color: #FFFFFF;
		letter-spacing: 0;
	}
	.tp2{
		width: 90%;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
		margin-top: 35px;
		margin-left: 4%;
	}
</style>
